// import React, { Component } from "react";
import React, { PureComponent } from "react";
// 生命周期也是只有类组件有

import Child from "./Child";

// PureComponent可以取代shouldComponentUpdate生命周期
// 自动地去比较所有的props和state，甚至是复杂类型
class App extends PureComponent {
  // 生命周期是写在和render并列的地方

  // 初始化阶段
  // constructor就是第一个生命周期
  // constructor是一个特殊的函数，它会在类被实例化的时候调用，会被最先调用，只会被调用一次
  // 初始化state和props
  constructor(props) {
    super(props);
    this.state = {
      num: 10,
      list: [],
    };
    // this.ipt = createRef();
    // this.fn = this.fn.bind(this);
  }

  fn = () => {
    // this.setState((prevStare) => {
    //   return {
    //     num: prevStare.num + 1,
    //   };
    // });
    this.setState({
      num: 10,
    });
  };

  // 挂载阶段
  UNSAFE_componentWillMount() {
    console.log("componentWillMount");
    // this.setState({
    //   num: 20,
    // });

    // fiber算法，分片，16版本新增
    // 渲染组件或者更新组件的时候,也许组件会很大，做渲染组件，执行生命周期，处理数据等等,处理时间会很长
    // 再加上js是同步和单线程的,就会出现卡顿的情况
    // fiber算法就是将整个完整的大任务，分片成很多小的任务，在小任务执行的中间就有机会去执行其他任务了

    // 不要在这里做数据请求
    // 因为fiber算法，会有一定的几率会让请求执行多次
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
  }

  // render本身也是一个生命周期
  // 必须要return jsx
  // 最常见的是解构state和props
  // 不要做数据请求,fiber
  render() {
    console.log("render");
    const { num, list } = this.state;
    return (
      <>
        <h2>旧版生命周期(16.3版本之前)</h2>
        <p>count: {num}</p>
        <button onClick={this.fn}>btn</button>
        <ul>
          {list.map((item) => (
            <li key={item._id}>{item.title}</li>
          ))}
        </ul>

        <hr />

        <Child num={this.state.num} />
      </>
    );
  }

  // 挂载后, 相当于mounted
  componentDidMount() {
    console.log("componentDidMount");
    // 页面已经加载完毕了，做任何的事情的
    // fetch("http://www.pudge.wang:3080/api/rated/list")
    //   .then((response) => response.json())
    //   .then((res) => {
    //     this.setState({
    //       list: res.result,
    //     });
    //   });
  }

  // 更新阶段
  // 询问组件是否要更新
  // 这个生命周期必须要返回true或者false
  // 性能优化
  // shouldComponentUpdate(nextProps, nextState) {
  //   // console.log("shouldComponentUpdate");
  //   // console.log(state);
  //   // return true;

  //   // if (nextState.num === this.state.num) {
  //   //   return false;
  //   // } else {
  //   //   return true;
  //   // }

  //   return nextState.num !== this.state.num;
  // }

  // 组件将要更新
  // 已经废弃了
  UNSAFE_componentWillUpdate() {
    console.log("componentWillUpdate");
  }

  // 组件更新结束，相当于updated
  // 不要再这里修改数据，会造成死循环
  componentDidUpdate() {
    console.log("componentDidUpdate");
    // this.setState((prevStare) => {
    //   return {
    //     num: prevStare.num + 1,
    //   };
    // });
  }

  // 卸载阶段
  // 清除定时器，断开websocket，echarts和map等插件，js的事件监听
  componentWillUnmount() {
    console.log("componentWillUnmount");
  }
}

export default App;
